<script setup lang="ts">
import { showConfirmDialog, showSuccessToast } from 'vant';
import { ref } from 'vue'
import { API } from '../api';
import { XYCOrderEntity } from '../api/_Api';
import { useUserList } from './useUserList'
import { useRouter } from 'vue-router';
const push = useRouter().push
const list = ref([] as XYCOrderEntity[]);
const loading = ref(false);
const finished = ref(false);
const onLoad = async () => {
    console.log('2222')
    const { data: { data } } = await API.orderControllerXycFind({ page: form.value.page++, size: form.value.size })
    console.log("🚀 ~ onLoad ~ data:", data)
    list.value.push(...data?.list || [])
    form.value.total = data?.total || 0
    showSuccessToast({ message: '加载成功~' });
    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= form.value.total) {
        finished.value = true;
    }
};
const form = ref({ page: 1, size: 20, total: 0 })
function showConfirm(id: string) {
    showConfirmDialog({
        title: '提示',
        message: '你确认要删除该行记录吗？',
    })
        .then(async () => {
            // on confirm
            await API.userControllerXycDelete({ id })
            showSuccessToast({ message: '删除成功~' });
            form.value.page = 1
            form.value.total = 0
            list.value = []
            setTimeout(() => {
                getListFunc()
            }, 1000)
        })
        .catch(() => {
            // on cancel
        });
}

const { userList, getListFunc } = useUserList()
</script>

<template>
    <div class="inputlist">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="list">
            <van-row class="li">
                <van-col :span="2" class="td">序号</van-col>
                <van-col :span="4" class="td">姓名</van-col>
                <van-col :span="7" class="td">电话</van-col>
                <van-col :span="7" class="td">品牌</van-col>
                <van-col :span="4" class="td">操作</van-col>
            </van-row>
            <van-row v-for="(item, index) in userList" :key="item.id" :title="item.id" class="li">
                <van-col :span="2" class="td">{{ index + 1 }}</van-col>
                <van-col :span="4" class="td">{{ item.nickName }}</van-col>
                <van-col :span="7" class="td">{{ item.phoneNum }}</van-col>
                <van-col :span="7" class="td">{{ item.realName }}</van-col>
                <van-col :span="4" class="td">
                    <van-button icon="cross" type="primary" size="mini"
                        @click="showConfirm(item.id as string)"></van-button>
                    <van-button icon="edit" type="primary" size="mini"
                        @click="push(`/adduser?id=${item.id}&nickName=${item.nickName}&realName=${item.realName}&phoneNum=${item.phoneNum}`)"></van-button>
                </van-col>
            </van-row>
        </van-list>
        <van-button type="primary" size="normal" round @click="push('/adduser')" icon="plus" class="add"></van-button>
    </div>
</template>

<style scoped lang="less">
.exec {
    display: flex;
    justify-content: space-between;
    padding: 0 20px 0 0;
    align-items: center;

    .total {
        // font-size: 12px;
    }
}

.li {
    padding: 10px 10px;
    align-items: center;

    .td {
        padding-right: 10px;
    }
}

.from {
    display: flex;
}

.from-item {
    display: inline-block;
    width: 30vw;
}

.add {
    position: fixed;
    right: 30px;
    bottom: 30vw;
    height: 40px;
    width: 40px;
}
</style>
